/**
 * @description 个人信息注册页
 */
//公用样式 
require('../../assets/css/index.less');

//引入weui库
require('../../assets/lib/weui/weui.css');
// var weui = require('../../assets/lib/weui/weui.js');
//引入图标
require('../../assets/fonts/iconfont.css');
//当前页面样式
require('./user-info.less');

//工具函数 utils
const dom = require('../../utils/dom');
const local = require('../../utils/local.js');
//引入axios封装的文件
let https = require('../../utils/https.js');

dom.isLogin()



//DOM加载事件
dom.ready(function () {
    //全局变量
    let headImg = '';
    let sexN;
    //定义省份变量
    let proData;
    let cityId;


    //1)返回功能
    dom.addEvent('#return-01', function () {
        history.back()
    })


    //回填数据---把本地数据渲染到网页中

    function rander() {
        //1.获取本地数据
        let userData = local.get('userInfo');
        //2.回填数据
        //解构
        let { nickName,
            gender,
            provinceId,
            cityId,
            birthday,
            imgUrl,
            sign 
        } = userData;


        imgUrl = ''

        //填写数据到指定位置
        dom.getEle('#headPicVal').src = imgUrl ? https.BASE_URL + imgUrl : require('../../assets/imgs/cat.jpg');
        //保存数据时,数据不能没有,暂时使用本地数据填
        headImg = imgUrl;

        dom.getEle('#nickNameVal').value = nickName;
        dom.getEle('#sexVal').innerHTML = gender ? "男" : "女";
        sexN = gender;
        dom.getEle('#birthdayVal').innerHTML = birthday;
        dom.getEle('#info').value=sign
        //省份和城市渲染 
        getPos(provinceId, cityId);
    }

    function getPos(pro, city) {
        https.get('/api/shared/province', function (res) {
            let { errno, data } = res;
            if (errno == 0) {
                let proData = data.filter(v => {
                    return v.id == pro;
                })
                //省份
                dom.getEle('#provinceVal').innerHTML = proData[0].name;
                https.get('/api/shared/city?provinceId=' + proData[0].id, function (res) {
                    let { errno, data } = res;
                    if (errno == 0) {
                        let cityData = data.filter(v => {
                            return v.id == city;
                        })
                        //城市
                        dom.getEle('#cityVal').innerHTML = cityData[0].name;
                    }
                })
            }
        })
    }

    //调用
    rander()

    //2)头像上传
    //1.简单交互效果--点击图像,进行图像选择
 
   dom.addEvent('#headPicVal', function () {
        dom.getEle('#upLoadPic').click()
    })
    //2.上传图像

    dom.getEle('#upLoadPic').addEventListener('change', function () {
        //使用封装完成的上传图像
        https.upLoadPic('/api/shared/uploadPortrait', "file", this.files[0], function (res) {
            //4.解构参数
            let { errno, data } = res;
            //5.判定
            if (errno == 0) {
                //6.把上传成功的图像 回填到 网页中
                dom.getEle('#headPicVal').src = https.BASE_URL + data.url;
                //保存到全局
                headImg = data.url
            } else {
                weui.alert(res.message)
            }
        })
    })

    //3)选择性别
    dom.addEvent('#sex', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }], {
            // 选中触发事件
            onConfirm: function (result) {
                console.log('onConfirm===>', result[0].label);
                //把选中的值添加到网页中
                dom.getEle('#sexVal').innerHTML = result[0].label;
                //保存到全局
                sexN = result[0].value;
            },
            title: '请选择性别'
        });
    })

    //4)选择生日
    dom.addEvent('#birthday', function () {
        weui.datePicker({
            start: 1890,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                // 处理数据格式
                let birthday = result.map(v => {
                    return v.value < 10 ? "0" + v.value : v.value;
                }).join('-')
                //把生日添加到指定位置
                dom.getEle('#birthdayVal').innerHTML = birthday;
            },
            title: '请选择生日'
        });
    })

    //5)选择省份
    dom.addEvent('#province', function () {
        //1.发ajax获取省份数据并拼接weui所需格式
        https.get('/api/shared/province', function (res) {
            //解构参数
            let { errno, data } = res;
            //判定
            if (errno == 0) {
                /*weuipicker格式为以下:
                    [{
                        label: '男',
                        value: 0
                    }]
                
                */
                //处理数据格式
                data = data.map(v => {
                    return {
                        label: v.name,
                        value: v.id
                    }
                })
                //2.调用weui选择器
                weui.picker(data, {
                    // 选中触发事件
                    onConfirm: function (result) {
                        //把选中的值添加到网页中
                        dom.getEle('#provinceVal').innerHTML = result[0].label
                        //保存省份ID
                        proData = result[0].value

                    },
                    title: '请选择省份'
                });

            } else {
                weui.alert(res.message)
            }
        })

    })

    //6)选择城市

    dom.addEvent('#city', function () {
        //判定选择了省份再进行下面代码
        if (proData) {
            //1.发ajax获取城市数据并拼接weui所需格式
            https.get(`/api/shared/city?provinceId=${proData}`, function (res) {
                //解构参数
                let { errno, data } = res;
                //判定
                if (errno == 0) {
                    /*weuipicker格式为以下:
                        [{
                            label: '男',
                            value: 0
                        }]
                    
                    */
                    //处理数据格式
                    data = data.map(v => {
                        return {
                            label: v.name,
                            value: v.id
                        }
                    })
                    //2.调用weui选择器
                    weui.picker(data, {
                        // 选中触发事件
                        onConfirm: function (result) {
                            //把选中的值添加到网页中
                            dom.getEle('#cityVal').innerHTML = result[0].label;
                            //保存城市id
                            cityId = result[0].value;

                        },
                        title: '请选择城市'
                    });

                } else {
                    weui.alert(res.message)
                }
            })
        }

    })

    
    //7)个人简介字符数处理
    dom.getEle('#info').addEventListener('input', function () {
        let len = this.value.length;
        if (len > 19) {
            this.value = this.value.slice(0, 20);
        }
        dom.getEle('#num').innerHTML = this.value.length;

    })

    //保存修改数据
    dom.addEvent('#updateBtn', function () {
        //1.获取用户相关的数据
        // let userData = {
        //     imgUrl: headImg,
        //     nickName: nickNameVal.value,
        //     gender: sexN,
        //     birthday: birthdayVal.innerText,
        //     provinceId: proData,
        //     cityId,
        //     sign: info.value,
        // }

        // console.log(userData);
        //2.发ajax保存数据
        https.post('/api/user/changeInfo', {
            imgUrl: headImg,
            nickName: nickNameVal.value,
            gender: sexN,
            birthday: birthdayVal.innerText,
            provinceId: proData,
            cityId,
            sign: info.value,
        }, function (res) {
            //解构参数
            let { errno, data } = res;
            //判定
            if (errno == 0) {//成功了,跳转页面
                //提示信息
                weui.topTips('修改数据成功!');
                console.log(data);
                //跳转页面
                location.href = 'my.html'
            } else {
                weui.alert(res.message)
            }
        })

    })

})

